﻿@model TopMenuModel
@using System.Text.RegularExpressions
@using Nop.Web.Models.Catalog;
@{
    var isRtl = this.ShouldUseRtlTheme();
}
@helper Bracket_Remover(string input)
{
    int index1 = input.IndexOf('(');
    string result = input.Remove(index1, 1);

    index1 = result.IndexOf(')');
    result = result.Remove(index1, 1);

    @Html.Raw(@result)
}


@helper RenderSubCategoryLine(CategorySimpleModel category, int level)
{
    <li>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            @category.Name
            &nbsp;<i class="fa fa-angle-down"></i>
            &nbsp;<i class="fa fa-angle-right"></i>
        </a>
        <ul class="dropdown-menu">
            @foreach (var subCategory in category.SubCategories)
            {
                @RenderCategoryLine(subCategory, level + 1)
            }
        </ul>

    </li>
}

@helper RenderCategoryLine(CategorySimpleModel category, int level)
{
    if (category.SubCategories.Count > 0)
    {
        @RenderSubCategoryLine(category, 0)
    }
    else
    {
        <li>
            <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">
                @category.Name
            </a>
        </li>
    }
}

<div class="navbar  category-menu" role="navigation">
    <div class="">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse category-navbar-collapse">
            <ul class="nav navbar-nav">
                @Html.Widget("header_menu_before")
                <li><a href="@Url.RouteUrl("HomePage")"><span class="glyphicon glyphicon-home"></span></a></li>
                @{
                    var rootCategories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList();
                }
                @foreach (var category in rootCategories)
                {
                    @RenderCategoryLine(category, 0)
                }

                @foreach (var topic in Model.Topics)
                {
                    <li><a href="@Url.RouteUrl("Topic", new {SeName = topic.SeName})">@topic.Name</a></li>

                }
                @if (Model.Categories.Count == 0 && Model.Topics.Count == 0)
                {
                    //no categories to display?
                    //in this cae let's diplay some default menu items
                    <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
                    if (Model.RecentlyAddedProductsEnabled)
                    {
                        <li>
                            <a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
                        </li>
                    }
                    <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
                    <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
                    if (Model.BlogEnabled)
                    {
                        <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
                    }
                    if (Model.ForumEnabled)
                    {
                        <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
                    }
                    <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
                }
                @Html.Widget("header_menu_after")
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>


<script>
    $(document).ready(function () {
        $('.navbar a.dropdown-toggle').on('click', function (e) {
            var elmnt = $(this).parent().parent();
            if (!elmnt.hasClass('nav')) {
                var li = $(this).parent();
                var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
                var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;

                if (!li.hasClass('open')) li.addClass('open')
                else li.removeClass('open');
                $(this).next().css('top', heightParent + 'px');
                $(this).next().css('left', widthParent + 'px');

                return false;
            }
        });
    });
</script>

<script>
    function setMouseHoverDropdown() {
        if ($(window).innerWidth() > 767) {
            $('ul.nav li').hover(function () {
                $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
            }, function () {
                $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
            });
        }
    }
    $(window).load(function () {
        setMouseHoverDropdown();
    });
    $(document).ready(function () {
        setMouseHoverDropdown();
    });
    $(window).resize(function () {
        setMouseHoverDropdown();
    });
</script>

<script>
    $(document).ready(function () {
        $(".navbar-toggle").click(function() {
            $(this).parent().find("> .navbar-header").css("overflow-y", "auto");
        });
    });
</script>

<script type="text/javascript">
    $(function () {
        // Call stylesheet init so that all stylesheet changing functions
        // will work.
        $.stylesheetInit();

        // This code loops through the stylesheets when you click the link with
        // an ID of "toggler" below.
        $('#toggler').bind(
            'click',
            function (e) {
                $.stylesheetToggle();
                return false;
            }
        );

        // When one of the styleswitch links is clicked then switch the stylesheet to
        // the one matching the value of that links rel attribute.
        $('.styleswitch').bind(
            'click',
            function (e) {
                $.stylesheetSwitch(this.getAttribute('rel'));
                return false;
            }
        );


        $("#configure-button").on("click", function (e) {
            e.preventDefault();
            if ($(this).data("expanded") == "true") {
                $("#color-options").css({ right: '-140px' });
                $("#configure-button").css({ right: '0px' });
                $(this).data("expanded", "false");
            } else {
                $("#color-options").css({ right: '0px' });
                $("#configure-button").css({ right: '140px' });
                $(this).data("expanded", "true");
            }

        });


    });

</script>


